<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天气网</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
		.container{
			width: 1200px;
			margin:0 auto;
			margin-top: 20px;
		}
		input{
			width: 300px;
			height: 30px;
			background: #ccc;
			margin-bottom: 20px;
		}
		.main ul::after{
			display: table;
			content: "";
			clear: both;
		}
		.main ul li{
			float: left;
			width: 159px;
			height: 255px;
			padding:5px;
			color: #fff;
			padding-bottom: 40px;
			line-height: 30px;
			font-size: 14px;
			list-style: none;
			text-align: center;
			border:1px solid #ccc;
		}
		.main ul li:nth-child(1){
			/**/
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#88a9ca),to(#bcd3e3));
		}
		.main ul li:nth-child(2){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#88a9ca),to(#bcd3e3));
		}
		.main ul li:nth-child(3){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
		}
		.main ul li:nth-child(4){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
		}
		.main ul li:nth-child(5){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
		}
		.main ul li:nth-child(6){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#88a9ca),to(#bcd3e3));
			
		}
		.main ul li:nth-child(7){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
			
		}
		.main .buttom div{
			font-size: 12px;
		}
		.main .buttom div span{
			font-size: 12px;
			line-height: 20px;
		}
		.main .top div img{
			padding: 10px;
		}
		.main .top{
			padding-top: 10px;
		}

		.nav::after{
		    display: table;
		    content: "";
		    clear: both;
		}
		.nav li{
		    float: left;
		    list-style: none;
		    padding: 10px;
		    width: 100px;
		    text-align: center;
		    cursor: pointer;
		}
		.nav .active{
		    background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
		    color: #fff;
		}
		.shenghuo>div{
		    display: none;
		}
		.shenghuo>div.active{
		    display: block;
		}
		.main1{
			margin-top: 20px;
		}
		.sheng1::after{
			display: table;
			content: "";
			clear: both;
		}
		.sheng1 .sheng1-1,.sheng1-2{
			width: 275px;
    		float: left;
    		border: 1px solid #fff;
    		height: 188px;
    		background: #daedff;
		}
		.sheng1 .sheng1-2{
			border:1px solid #ccc;
		}
		.sheng1 .sheng1-1 .left-1{
			float: left;
		    padding-top: 45px;
		    padding-left: 20px;
		    text-align: center;
		    line-height: 25px;
		}
		.sheng1 .sheng1-1 .left-1 p:nth-child(2){
			font-size: 15px;
			color: #3870a6;
		}
		.sheng1 .sheng1-1 .right-1{
			padding-top: 57px;
    		padding-left: 21px;
    		display: table;
		}
		.sheng1 .sheng1-1 .right-1 p:nth-child(1){
			font-size: 21px;
			color: #3870a6;
		}
		.sheng1 .sheng1-1 .right-1 p:nth-child(2){
			font-size: 15px;
			color: #818181;
			padding-top: 20px;
		}
		.sheng2 .sheng1-2 .left-1{
			float: left;
		    padding-top: 45px;
		    padding-left: 20px;
		    text-align: center;
		    line-height: 25px;
		}
		.sheng2 .sheng1-2 .left-1 p:nth-child(2){
			font-size: 15px;
			color: #3870a6;
		}
		.sheng2 .sheng1-2 .right-1{
			padding-top: 57px;
    		padding-left: 21px;
    		display: table;
		}
		.sheng2 .sheng1-2 .right-1 p:nth-child(1){
			font-size: 21px;
			color: #3870a6;
		}
		.sheng2 .sheng1-2 .right-1 p:nth-child(2){
			font-size: 15px;
			color: #818181;
			padding-top: 20px;
		}
		.shenghuo ul::after{
			display: table;
			content: "";
			clear: both;
		}
		.shenghuo ul li{
			float: left;
			width: 159px;
			height: 255px;
			padding:5px;
			color: #fff;
			padding-bottom: 40px;
			line-height: 30px;
			font-size: 14px;
			list-style: none;
			text-align: center;
			border:1px solid #ccc;
		}
		.shenghuo ul li:nth-child(1){
			/**/
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
		}
		.shenghuo ul li:nth-child(2){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
		}
		.shenghuo ul li:nth-child(3){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
		}
		.shenghuo ul li:nth-child(4){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
		}
		.shenghuo ul li:nth-child(5){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
		}
		.shenghuo ul li:nth-child(6){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
			
		}
		.shenghuo ul li:nth-child(7){
			background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));
			
		}
		.shenghuo .buttom div{
			font-size: 12px;
		}
		.shenghuo .buttom div span{
			font-size: 12px;
			line-height: 20px;
		}
		.shenghuo .top div img{
			padding: 10px;
		}
		.shenghuo .top{
			padding-top: 10px;
		}
		.shenghuo .top div:nth-child(2){
			line-height: 100px;
		}
	</style>
</head>
<body>
	<div class="container">
		<input type="text" id="ipt" placeholder="请在此输入城市">

		<div class="main">
			<ul>
				<li>
					<div class="top">
						<div>日期：<span id="date"></span></div>
						<div>城市：<span id="city"></span></div>
						<div>天气：<span id="now"></span></div>
						<div><img src="img/yin.png" alt=""></div>
						<div>最高温度：<span id="tmp-max"></span>℃</div>
						<div>最低温度：<span id="tmp-min"></span>℃</div>
	    				
	    				<div>风向：<span id="dir"></span></div>
    				</div>
    				
				</li>
				<li>
					<div class="top">
						<div>日期：<span id="date1"></span></div>
						<div>城市：<span id="city1"></span></div>
						<div>天气：<span id="now1"></span></div>
						<div><img src="img/cloudy.png" alt=""></div>
						<div>最高温度：<span id="tmp-max1"></span>℃</div>
						<div>最低温度：<span id="tmp-min1"></span>℃</div>
	    				
	    				<div>风向：<span id="dir1"></span></div>
    				</div>
    				
				</li>
				<li>
					<div class="top">
						<div>日期：<span id="date2"></span></div>
						<div>城市：<span id="city2"></span></div>
						<div>天气：<span id="now2"></span></div>
						<div><img src="img/sunny.png" alt=""></div>
						<div>最高温度：<span id="tmp-max2"></span>℃</div>
						<div>最低温度：<span id="tmp-min2"></span>℃</div>
	    				
	    				<div>风向：<span id="dir2"></span></div>
    				</div>
				</li>
				<li>
					<div class="top">
						<div>日期：<span id="date3"></span></div>
						<div>城市：<span id="city3"></span></div>
						<div>天气：<span id="now3"></span></div>
						<div><img src="img/sunny.png" alt=""></div>
						<div>最高温度：<span id="tmp-max3"></span>℃</div>
						<div>最低温度：<span id="tmp-min3"></span>℃</div>
	    				
	    				<div>风向：<span id="dir3"></span></div>
    				</div>
				</li>
				<li>
					<div class="top">
						<div>日期：<span id="date4"></span></div>
						<div>城市：<span id="city4"></span></div>
						<div>天气：<span id="now4"></span></div>
						<div><img src="img/sunny.png" alt=""></div>
						<div>最高温度：<span id="tmp-max4"></span>℃</div>
						<div>最低温度：<span id="tmp-min4"></span>℃</div>
	    				
	    				<div>风向：<span id="dir4"></span></div>
    				</div>
				</li>
				<li>
					<div class="top">
						<div>日期：<span id="date5"></span></div>
						<div>城市：<span id="city5"></span></div>
						<div>天气：<span id="now5"></span></div>
						<div><img src="img/cloudy.png" alt=""></div>
						<div>最高温度：<span id="tmp-max5"></span>℃</div>
						<div>最低温度：<span id="tmp-min5"></span>℃</div>
	    				
	    				<div>风向：<span id="dir5"></span></div>
    				</div>
				</li>
				<li>
					<div class="top">
						<div>日期：<span id="date6"></span></div>
						<div>城市：<span id="city6"></span></div>
						<div>天气：<span id="now6"></span></div>
						<div><img src="img/sunny.png" alt=""></div>
						<div>最高温度：<span id="tmp-max6"></span>℃</div>
						<div>最低温度：<span id="tmp-min6"></span>℃</div>
	    				
	    				<div>风向：<span id="dir6"></span></div>
    				</div>
				</li>
			</ul>
		</div>
		<div class="main1">
			<ul class="nav">
				<li class="active">时段预报</li>
				<li>生活指数</li>
			</ul>
			<div class="shenghuo">
				<div class="active">
					<ul>
				<li>
					<div class="top">
						<div>时间：<span id="data"></span></div>
						<div>温度：<span id="tmp"></span>℃</div>
	    				
	    				<div>风力等级：<span id="sc"></span></div>
    				</div>
    				
				</li>
				<li>
					<div class="top">
						<div>时间：<span id="data1"></span></div>
						<div>温度：<span id="tmp1"></span>℃</div>
	    				
	    				<div>风力等级：<span id="sc1"></span></div>
    				</div>
    				
				</li>
				<li>
					<div class="top">
						<div>时间：<span id="data2"></span></div>
						<div>温度：<span id="tmp2"></span>℃</div>
	    				
	    				<div>风力等级：<span id="sc2"></span></div>
    				</div>
				</li>
				<li>
					<div class="top">
						<div>时间：<span id="data3"></span></div>
						<div>温度：<span id="tmp3"></span>℃</div>
	    				
	    				<div>风力等级：<span id="sc3"></span></div>
    				</div>
				</li>
				<li>
					<div class="top">
						<div>时间：<span id="data4"></span></div>
						<div>温度：<span id="tmp4"></span>℃</div>
	    				
	    				<div>风力等级：<span id="sc4"></span></div>
    				</div>
				</li>
				<li>
					<div class="top">
						<div>时间：<span id="data5"></span></div>
						<div>温度：<span id="tmp5"></span>℃</div>
	    				
	    				<div>风力等级：<span id="sc5"></span></div>
    				</div>
				</li>
				<li>
					<div class="top">
						<div>时间：<span id="data6"></span></div>
						<div>温度：<span id="tmp6"></span>℃</div>
	    				
	    				<div>风力等级：<span id="sc6"></span></div>
    				</div>
				</li>
			</ul>
				</div>
				<div>
                    <div class="sheng1">
						<div class="sheng1-1">
							<div class="left-1">
								<p><img src="img/ziwaixin.png" alt=""></p>
								<p>紫外线指数</p>
							</div>
							<div class="right-1">
								<p>很强</p>
								<p>涂擦SPF20以上，PA++护肤品，避强光。</p>
							</div>
						</div>
						<div class="sheng1-1">
							<div class="left-1">
								<p><img src="img/bishengyuan.png" alt=""></p>
								<p>减肥指数</p>
							</div>
							<div class="right-1">
								<p><img src="img/wujiaoxing.png" alt=""></p>
								<p>春天不减肥，夏天徒伤悲。天气较舒适，快去运动吧。</p>
							</div>
						</div>
						<div class="sheng1-1">
							<div class="left-1">
								<p><img src="img/xiche.png" alt=""></p>
								<p>健臻·血糖指数</p>
							</div>
							<div class="right-1">
								<p>不易波动</p>
								<p>天气条件好，血糖不易波动，可适时进行户外锻炼。</p>
							</div>
						</div>
                    </div>
                    <div class="sheng2">
						<div class="sheng1-2">
							<div class="left-1">
								<p><img src="img/chuanyi.png" alt=""></p>
								<p>穿衣指数</p>
							</div>
							<div class="right-1">
								<p>热</p>
								<p>适合穿T恤、短薄外套等夏季服装。</p>
							</div>
						</div>  
						<div class="sheng1-2">
							<div class="left-1">
								<p><img src="img/che.png" alt=""></p>
								<p>洗车指数</p>
							</div>
							<div class="right-1">
								<p>适宜</p>
								<p>天气较好，适合擦洗汽车。</p>
							</div>
						</div>
						<div class="sheng1-2">
							<div class="left-1">
								<p><img src="img/quan.png" alt=""></p>
								<p>空气污染指数</p>
							</div>
							<div class="right-1">
								<p>中</p>
								<p>易感人群应适当减少室外活动</p>
							</div>
						</div>
                    </div>
				</div>
			</div>
		</div>
	</div>

	<script>
        var city = "沧州";

        function loadXMLDoc() {
            var xmlhttp;//变量
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }//if判断,当
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var json = JSON.parse(xmlhttp.responseText);
                    console.log(json);
                    // 今天
                    document.querySelector("#date").innerHTML = json.daily_forecast[0].date
                    document.querySelector("#data").innerHTML = json.hourly_forecast[0].date
                    document.querySelector("#city").innerHTML = json.basic.city
                    document.querySelector("#now").innerHTML = json.daily_forecast[0].cond.txt_d
                    document.querySelector("#tmp-max").innerHTML = json.daily_forecast[0].tmp.max
                    document.querySelector("#tmp-min").innerHTML = json.daily_forecast[0].tmp.min
                    document.querySelector("#tmp").innerHTML = json.hourly_forecast[0].tmp
                    document.querySelector("#dir").innerHTML = json.daily_forecast[0].wind.dir
                    document.querySelector("#sc").innerHTML = json.hourly_forecast[0].wind.sc
                    // 明天
                    document.querySelector("#date1").innerHTML = json.daily_forecast[1].date
                    document.querySelector("#data1").innerHTML = json.hourly_forecast[1].date
                    document.querySelector("#city1").innerHTML = json.basic.city
                    document.querySelector("#now1").innerHTML = json.daily_forecast[1].cond.txt_d
                    document.querySelector("#tmp-max1").innerHTML = json.daily_forecast[1].tmp.max
                    document.querySelector("#tmp-min1").innerHTML = json.daily_forecast[1].tmp.min
                    document.querySelector("#tmp1").innerHTML = json.hourly_forecast[1].tmp
                    document.querySelector("#dir1").innerHTML = json.daily_forecast[1].wind.dir
                    document.querySelector("#sc1").innerHTML = json.hourly_forecast[1].wind.sc

                    // 后天
                    document.querySelector("#date2").innerHTML = json.daily_forecast[2].date
                    document.querySelector("#data2").innerHTML = json.hourly_forecast[2].date
                    document.querySelector("#city2").innerHTML = json.basic.city
                    document.querySelector("#now2").innerHTML = json.daily_forecast[2].cond.txt_d
                    document.querySelector("#tmp-max2").innerHTML = json.daily_forecast[2].tmp.max
                    document.querySelector("#tmp-min2").innerHTML = json.daily_forecast[2].tmp.min
                    document.querySelector("#tmp2").innerHTML = json.hourly_forecast[2].tmp
                    document.querySelector("#dir2").innerHTML = json.daily_forecast[2].wind.dir
                    document.querySelector("#sc2").innerHTML = json.hourly_forecast[2].wind.sc

                    // 第四天
                    document.querySelector("#date3").innerHTML = json.daily_forecast[3].date
                    document.querySelector("#data3").innerHTML = json.hourly_forecast[3].date
                    document.querySelector("#city3").innerHTML = json.basic.city
                    document.querySelector("#now3").innerHTML = json.daily_forecast[3].cond.txt_d
                    document.querySelector("#tmp-max3").innerHTML = json.daily_forecast[3].tmp.max
                    document.querySelector("#tmp-min3").innerHTML = json.daily_forecast[3].tmp.min
                    document.querySelector("#tmp3").innerHTML = json.hourly_forecast[3].tmp
                    document.querySelector("#dir3").innerHTML = json.daily_forecast[3].wind.dir
                    document.querySelector("#sc3").innerHTML = json.hourly_forecast[3].wind.sc

                    // 第五天
                    document.querySelector("#date4").innerHTML = json.daily_forecast[4].date
                    document.querySelector("#data4").innerHTML = json.hourly_forecast[4].date
                    document.querySelector("#city4").innerHTML = json.basic.city
                    document.querySelector("#now4").innerHTML = json.daily_forecast[4].cond.txt_d
                    document.querySelector("#tmp-max4").innerHTML = json.daily_forecast[4].tmp.max
                    document.querySelector("#tmp-min4").innerHTML = json.daily_forecast[4].tmp.min
                    document.querySelector("#tmp4").innerHTML = json.hourly_forecast[4].tmp
                    document.querySelector("#dir4").innerHTML = json.daily_forecast[4].wind.dir
                    document.querySelector("#sc4").innerHTML = json.hourly_forecast[4].wind.sc

                    // 第六天
                    document.querySelector("#date5").innerHTML = json.daily_forecast[5].date
                    document.querySelector("#data5").innerHTML = json.hourly_forecast[5].date
                    document.querySelector("#city5").innerHTML = json.basic.city
                    document.querySelector("#now5").innerHTML = json.daily_forecast[5].cond.txt_d
                    document.querySelector("#tmp-max5").innerHTML = json.daily_forecast[5].tmp.max
                    document.querySelector("#tmp-min5").innerHTML = json.daily_forecast[5].tmp.min
                    document.querySelector("#tmp5").innerHTML = json.hourly_forecast[5].tmp
                    document.querySelector("#dir5").innerHTML = json.daily_forecast[5].wind.dir
                    document.querySelector("#sc5").innerHTML = json.hourly_forecast[5].wind.sc

                    // 第七天
                    document.querySelector("#date6").innerHTML = json.daily_forecast[6].date
                    document.querySelector("#data6").innerHTML = json.hourly_forecast[6].date
                    document.querySelector("#city6").innerHTML = json.basic.city
                    document.querySelector("#now6").innerHTML = json.daily_forecast[6].cond.txt_d
                    document.querySelector("#tmp-max6").innerHTML = json.daily_forecast[6].tmp.max
                    document.querySelector("#tmp-min6").innerHTML = json.daily_forecast[6].tmp.min
                    document.querySelector("#tmp6").innerHTML = json.hourly_forecast[6].tmp
                    document.querySelector("#dir6").innerHTML = json.daily_forecast[6].wind.dir
                    document.querySelector("#sc6").innerHTML = json.hourly_forecast[6].wind.sc
                }
            }
            xmlhttp.open("GET", "https://bird.ioliu.cn/weather?city=" + city, true);
            xmlhttp.send();
        }

        loadXMLDoc();

        document.querySelector("#ipt").addEventListener('change',function(){
            console.log(this.value);
            //赋值城市名
            city = this.value;
            //执行获取天气的函数
            loadXMLDoc();
        })





//选项卡
        var nav=document.querySelectorAll('.nav>li');
		var main=document.querySelectorAll('.shenghuo>div');

	for(var i=0;i<nav.length;i++){
	    nav[i].index=i;
	    nav[i].addEventListener('click',function(){
	        for(var j=0;j<nav.length;j++){
	            nav[j].classList.remove('active');
	            main[j].classList.remove('active');
	        }
	        this.classList.add('active');
	        main[this.index].classList.add('active');
	    });
}
    </script>
</body>
</html>